<template>
  <div id="Administration">
    <div class="homeTitle admin">
      <span>用户管理</span>
      <el-input placeholder="搜索姓名" v-model="search" class="input-with-select">
        <el-button slot="append" icon="el-icon-search" @click="getdata(1)"></el-button>
      </el-input>
    </div>
    <div class="navQuery">
      <div class="queryCon">
        <div class="qSeles">
          <!-- 两个选择 -->
          <div class="xuanze">
             <div class="xuanzeCon">
              <span>所属地市：</span>
              <el-select v-model="city" placeholder="请选择" size="small" @change="cityChange">
                <el-option
                v-for="ele in cityOption"
                :key="ele.name"
                :label="ele.name"
                :value="ele.name"
              ></el-option>
              </el-select>
            </div>
            <div class="xuanzeCon">
              <span>所属机构：</span>
              <el-select v-model="bank" placeholder="请选择" size="small" @change="bankChange">
                <el-option
                v-for="ele in bankOption"
                :key="ele.name"
                :label="ele.name"
                :value="ele.name"
              ></el-option>
              </el-select>
            </div>
            <div class="xuanzeCon">
              <span>所属部门：</span>
              <el-select v-model="bumen" placeholder="请选择" size="small" @change="bumenChange">
               <el-option
                v-for="ele in bumenOption"
                :key="ele.value"
                :label="ele.name"
                :value="ele.name"
              ></el-option>
              </el-select>
            </div>
            <div class="xuanzeCon">
              <span>所属子部门：</span>
              <el-select v-model="keshi" placeholder="请选择" size="small">
                <el-option
                v-for="ele in keshiOption"
                :key="ele.value"
                :label="ele.name"
                :value="ele.name"
              ></el-option>
              </el-select>
            </div>
          </div>
          <!-- 按钮 -->
          <div class="btnAb">
            <el-button type="primary" size="small" @click="getdata(1)">查询</el-button>
            <el-button type="primary" size="small" @click="addUser">新增用户</el-button>
            <!-- <el-button type="primary" size="small">按权限查看用户</el-button> -->
          </div>
        </div>
      </div>
      <!-- 表格 -->
      <div class="tablecon">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="name" label="姓名" align="center"></el-table-column>
          <el-table-column prop="jobNum" label="工号" align="center"></el-table-column>
          <el-table-column prop="phone" label="手机号" align="center"></el-table-column>
          <el-table-column prop="city" label="所属地市" align="center"></el-table-column>
          <el-table-column prop="bank" label="所属机构" align="center"></el-table-column>
          <el-table-column prop="department" label="所属部门" align="center"></el-table-column>
          <el-table-column prop="state" label="当前状态" align="center" :formatter='filterValue'></el-table-column>
          <el-table-column prop="address" label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" @click="modify(scope.row)">修改</el-button>
              <el-button size="mini" @click="shixiao(scope.row, 2)" v-if="scope.row.state==1">失效</el-button>
              <el-button size="mini" @click="shixiao(scope.row, 1)" v-else>生效</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="pgfy">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="10"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Administration",
  data() {
    return {
      search: "",
      tableData: [],
      // 四级联动
      city: '',
      cityOption: '',
      bank: '',
      bankOption: '',
      bumen: '',
      bumenOption: '',
      keshi: '',
      keshiOption: '',
      // ------四级联动结束------
      currentPage: this.$route.query.page-0 || 1,
      total: null,
      // ----------参数------------
      // objStatus: '',
      obj: ''
    };
  },
  mounted () {
    this.getCity();
  },
  methods: {
    filterValue (val) {
      return val.state==1? '生效' : '已无效'
    },
    getdata (val) {
      this.currentPage = val;
      let obj= {
        userName: this.search,
        city: this.city,
        bank: this.bank,
        department: this.bumen,
        page: this.currentPage
      }
      this.obj = obj;
      if (obj.city == '全部') delete(obj.city)
      this.axios.get('user/selectList',{params:this.filterNoneObj(obj)})
        .then(({data}) => {
          if (data.code == 200) {
            this.tableData = data.data;
            this.total = data.pageInfo.total;
          }
        })
    },
    paramsGetdata (val) {
      let obj =  JSON.parse(sessionStorage.getItem('AdministrationParams'));
      this.obj = obj;
      this.search = obj.userName;
      this.currentPage = obj.page;
      this.city = obj.city;
      this.bank = obj.bank;
      this.bumen = obj.department;
      this.axios.get('user/selectList',{params:this.filterNoneObj(obj)})
        .then(({data}) => {
          if (data.code == 200) {
            this.tableData = data.data;
            this.total = data.pageInfo.total;
            this.getCityQ();
          }
        })
    },
    modify (row) {
      sessionStorage.setItem('AdministrationParams', JSON.stringify(this.obj));
      this.$router.push({path: 'modify', query: {status: 'modify', id: row.id}});
    },
    // 失效
    shixiao (row,num) {
      this.axios.post('user/register',{id: row.id, state: num})
        .then(({data})=> {
          if (data.code == 200) {
            this.$message({message: '设置成功',type: 'success'});
            row.state = num;
          }
        })
    },
    addUser() {
      this.$router.push('addUser');
    },
     // ---------四级联动开始----------------------
    // 地市查询
    getCity() {
      this.axios.get('organizationalChart/findAllCities')
        .then(({data}) => {
          let arr = data.data;
          arr.unshift({name: "全部", id: -1, type: "地市"});
          this.cityOption = arr;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 地市改变 
    cityChange() {
     let obj = this.cityOption.find((ele)=> {
        return ele.name == this.city;
      });
      this.bank = '';
      this.bumen = '';
      this.keshi = '';
      this.axios.get('organizationalChart/selectBank', {params: {id: obj.id}})
        .then(({data}) => {
          this.bankOption = data.data;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 机构行社改变
    bankChange() {
      let obj = this.bankOption.find((ele)=> {
        return ele.name == this.bank;
      });
      this.bumen = '';
      this.keshi = '';
      this.axios.get('organizationalChart/selectDepartment', {params: {id: obj.id}})
        .then(({data}) => {
          this.bumenOption = data.data;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 所属部门改变
    bumenChange() {
      let obj = this.bumenOption.find((ele)=> {
        return ele.name == this.bumen;
      });
      this.keshi = '';
      this.axios.get('organizationalChart/selectChildDepartment', {params: {id: obj.id}})
        .then(({data}) => {
          this.keshiOption = data.data;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // -----------四级联动结束----------------
    // 四级联动查询开始
      // 地市查询
    getCityQ() {
      this.axios.get('organizationalChart/findAllCities')
      .then(({data}) => {
         let arr = data.data;
          arr.unshift({name: "全部", id: -1, type: "地市"});
          this.cityOption = arr;
          this.cityChangeQ();
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 地市改变 
    cityChangeQ() {
     let obj = this.cityOption.find((ele)=> {
        return ele.name == this.city;
      });
      // this.bank = '';
      // this.bumen = '';
      // this.keshi = '';
      console.log('-------'+obj+'--------------');
      this.axios.get('organizationalChart/selectBank', {params: {id: obj.id}})
        .then(({data}) => {
          this.bankOption = data.data;
          this.bankChangeQ();
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 机构行社改变
    bankChangeQ() {
      let obj = this.bankOption.find((ele)=> {
        return ele.name == this.bank;
      });
      // this.bumen = '';
      // this.keshi = '';
      this.axios.get('organizationalChart/selectDepartment', {params: {id: obj.id}})
        .then(({data}) => {
          this.bumenOption = data.data;
          this.bumenChangeQ();
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 所属部门改变
    bumenChangeQ() {
      let obj = this.bumenOption.find((ele)=> {
        return ele.name == this.bumen;
      });
      // this.keshi = '';
      if (!obj) return false;
      this.axios.get('organizationalChart/selectChildDepartment', {params: {id: obj.id}})
        .then(({data}) => {
          this.keshiOption = data.data;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 四级联动查询结束
     // 分页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getdata(val);
    }
  },
  beforeRouteEnter(to, from, next){
    next(vm=>{
      if(from.path=='/modify' && sessionStorage.AdministrationParams) {
        vm.paramsGetdata();
      } else {
        vm.getdata(1);
      }
    })
  },
  // watch: {
  //   currentPage: {
  //     handler: function (val, oldVal) {
  //       this.$router.replace({path: 'Administration', query:{page: this.currentPage}});
  //     },
  //     immediate: true
  //   }
  // }
};
</script>

<style lang="scss">
#Administration {
  .homeTitle {
    &.admin {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      border-bottom: 1px solid black;
      .el-input {
        width: 300px;
      }
    }
  }
  .navQuery {
    .queryCon {
      padding: 20px 20px;
      .qSeles {
        .xuanze {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          margin-bottom: 10px;
          .xuanzeCon {
            height: 40px;
            display: flex;
            align-items: center;
            margin-right: 30px;
            .el-input {
              width: 200px;
            }
          }
        }
        .btnAb {
          margin-top: 30px;
          .el-button {
            margin-right: 30px;
          }
        }
      }
    }
    .tablecon {
      padding: 20px;
    }
    .pgfy {
      padding: 20px;
      padding-top: 10px;
      text-align: right;
    }
  }
}
</style>
